<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS</title>
<meta name="description" content="Another attempt at doing fluid, rounded corners using CSS, this time with a single image and alpha opacity." />
<meta name="keywords" content="rounded css corners, css rounded corners, round boxes, inline dialogs, round css borders, css drop shadows" />
<meta name="author" content="Scott Schiller" />
<meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller" />
<meta name="language" content="en-us" />
<link rel="stylesheet" href="demo/dialog.css" media="screen" />
<link rel="stylesheet" href="demo/dialog-variants.css" media="screen" />
<link rel="stylesheet" href="demo/demo.css" media="screen" />
<script type="text/javascript" src="demo/demo.js"></script>
</head>

<body>

<div id="demo">

<div class="col">

<!-- drip-style dialog -->

<div class="dialog type4 drip" style="z-index:2"> <!-- inline style: sit on top of dialog below -->

 <!-- top right PNG -->
 <div class="content">

  <!-- optional: prevent vertical overflow -->
  <div class="wrapper">

   <!-- top/left corner -->
   <div class="t"></div>

    <!-- optional: standard module format-based content (not required for layout -->
    <div class="hd">
     <h1>Even <em>More</em> Rounded Corners With CSS</h1>
     <h2 class="compact">(Another technique for the pile.)</h2>
    </div>

    <div class="bd">
     <p>There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with various visual effects. Based on the original <a href="http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/" title="Original Rounded Corners article on schillmania.com">More Rounded Corners With CSS</a>, this update reduces the background to a single "sprite", retaining the alpha transparency benefits of PNG without bloating the markup required to produce the same effect. The end result is something which should allow for further customization.</p>
     <h2 class="tight">Features:</h2>
     <ul>
      <li>CSS-only, no Javascript</li>
      <li>Fluid layout, width/height (up to full image dimensions)</li>
      <li>Single PNG image</li>
      <li>PNG alpha transparency - corners, borders, drop shadows, inner gradients etc.</li>
      <li>Standard Module Format-based content markup (SMF approach thanks to <a href="http://nate.koechley.com/" title="Nate Koechley's Blog">Nate Koechley</a>) - see also, "<a href="http://snook.ca/archives/html_and_css/its_not_divitis/" title="Jonathan Snook's blog">It's Not Divitis</a>" (<a href="http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/" title="Divitis and Correct DIV Usage on Nate's blog">2</a>)</li>
      <li>Degradation to GIF (or 8-bit PNG) for IE 6</li>
     </ul>
    </div>

    <div class="ft">
     <h2 class="tight">Basic Exampless</h2>
     <p class="compact">See this <a href="basic.html" title="Basic Rounded Corner CSS">Basic Rounded Corner CSS</a> example.</p>
     <h2 class="tight">Download</h2>
     <p class="compact"><a href="http://www.schillmania.com/projects/dialog2/download/20070214-even-more-rounded-corners.zip" title="Download Rounded Corners with CSS examples">Download examples</a> - Includes this demo page, basic examples, images and PSD dialog templates (use layer effects + color fill to customize)</p>
     <h2 class="tight">Credits</h2>
     <ul>
      <li><a href="http://nate.koechley.com/" title="Nate Koechley's blog">Nate Koechley</a> - Standard Module Format</li>
      <li><a href="http://www.squidfingers.com/" title="squidfingers">squidfingers.com</a> - tiny tiled background design</li>
     </ul>
     <h2 class="tight">About</h2>
     <p><a href="http://www.schillmania.com" title="Scott Schiller's experimental design site">Scott Schiller</a> (<a href="http://www.schillmania.com/content/react/contact/" title="Contact information for Scott Schiller">contact</a>) is a Front-end Engineer (previously "Web Developer") who builds fun creative and technical stuff on the web - or failing that, tries - when he has free time. He likes building cool things which contribute to, yet enjoys mocking, the <a href="http://www.schillmania.com/content/opinion/2005/10/dont-believe-the-web-20-hype/" title="Web 2.0: Don't Believe The Hype!">Web 2.0 meme</a>. (See <a href="http://www.schillmania.com/content/entries/2006/08/how-web20-aware-are-you/" title="Take the Web 2.0 Awareness Test!">How Web 2.0-Aware Are You?</a>)</p>
    </div>

   </div>

  </div>

 <!-- bottom PNG -->
 <div class="b"><div></div></div>

</div>

<!-- dialog -->

<div class="dialog type2 drip" style="margin-top:-33px;_margin-top:0px"> <!-- inline style: slide under above dialog -->

 <div class="content">

  <div class="wrapper">

   <div class="t"></div>

   <div class="hd">
    <h1>Notes + Observations</h1>
    <h2 class="compact">Performance, efficiency, limitations and so on</h2>
   </div>

   <div class="bd">

    <p>This rounded corner technique may not be appropriate for some uses.</p>

    <h2 class="tight">PNG file size trade-off</h2>
    <p>Because this single-image technique uses PNGs which employ a deflate (ZIP)-style compression method, they can compress better than GIF, but generally not as well as JPEG (it is non-lossy unlike JPEG, however.) Nonetheless, file size will generally grow with the relative "complexity" of the image and its dimensions (gradients and patterns for example will likely not compress as well as flat colours.)</p>
    <p>Images nearing 800x600 can be 6 KB, whereas 1600x1200 can be 16 KB. The blue background on this element (excluding IE 6), is 800x1600 and is 10.7 KB. It appears compression is far more efficient on the vertical axis, but it may be worthwhile to experiment with different dimensions and patterns to optimize file size.</p>
    <p>It is also worthwhile to note that <em>the demo images may not be well-optimized</em>, and are also relatively complex as they use drop shadows, unique ("drip style") elements and gradients. I have not fully investigated this area yet.</p>
    <p>Some PNG "crunching" utilies are available which can help to get the file size down as well, post-export from an editor like the GIMP or Photoshop. These work by removing excess gamma data and other channel information, as far as I understand. PNGCrunch is one such example.</p>

    <h2>Alpha transparency vs. render performance</h2>
    <p>It is assumed that alpha transparency affects rendering performance within the browser relating to rendering, scrolling, resizing and animation (dynamic updating) of content. Swapping GIFs for PNGs for example may provide improved performance, though lack certain features such as alpha transparency. Large areas of opacity may render more slowly than smaller ones (alpha corners vs. entire PNG being partially translucent, for example), but this has not been tested.</p>
    <p>To test animation performance (excluding IE 6), double-click inside a dialog's content area. Speed may vary widely depending on browser window size and other variables. The native OS browsers (IE on Windows, Safari on Mac OS X) appear to handle this far better than others.</p>

   </div>

   <div class="ft">
    <h2>Single Image?</h2>
    <p class="compact">After some tinkering, I stuck to a single <code title="BAI: 'Big-Ass Image'">BAI</code> because it seems to offer a fairly flexible way to accommodate various design styles such as gradients without excessive image weight. The potential downside is the limitation on height due to file size, and since there is no tiling, the desire to avoid scrolling. Changing the BAI to a tiling sprite format would also require a markup structure different from this approach. In short, "use what works."</p>
   </div>

  </div>

 </div>

 <div class="b"><div></div></div>

</div>

<!-- /column -->
</div>

<div class="col last">

<!-- dialog -->

<div class="dialog type5 drip">

 <div class="content">

  <div class="wrapper">

   <div class="t"></div>

   <div class="hd">
    <h1>Technique</h1>
    <h2 class="compact">The nitty gritty.</h2>
   </div>

   <div class="bd">
    <p>Given the use of alpha transparency throughout, elements with background images may not overlap. Therefore, a few hook elements and positioning are used to provide the required "slices" which make a complete, fluid image.</p>
    <h2 class="tight">Markup Structure</h2>

    <p>Here is the base markup required for this format:</p>

<pre>&lt;div class="dialog"&gt;
 &lt;div class="content"&gt;
  &lt;div class="t"&gt;&lt;/div&gt;
  &lt;!-- Your content goes here --&gt;
 &lt;/div&gt;
 &lt;div class="b"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

    <p>Here is a more-complete variant using Standard Module Format, nicely-formatted and with comments:</p>

<pre>&lt;div class="dialog"&gt;

 &lt;!-- top/right PNG --&gt;
 &lt;div class="content"&gt;

  &lt;!-- optional: vertical scroll wrapper --&gt;
  &lt;div class="wrapper"&gt;

   &lt;!-- top/left PNG --&gt;
   &lt;div class="t"&gt;&lt;/div&gt;

<span>   &lt;!-- Your content goes here --&gt;

   &lt;!-- Optional: Standard Module Format (hd/bd/ft)
   for providing semantic, meaningful content.
   Not required for visual effect. --&gt;

   &lt;div class="hd"&gt;
    &lt;h1&gt;Technique&lt;/h1&gt;
    &lt;h2&gt;The nitty gritty.&lt;/h2&gt;
   &lt;/div&gt;

   &lt;div class="bd"&gt;
    &lt;p&gt;Given the use of alpha transparency...&lt;/p&gt;
   &lt;/div&gt;

   &lt;div class="ft"&gt;
    &lt;p&gt;This is where the footer goes.&lt;/p&gt;
   &lt;/div&gt;
</span>
  &lt;!-- end content --&gt;
  &lt;/div&gt;

 &lt;!-- end scroll wrapper --&gt;
 &lt;/div&gt;

 &lt;!-- bottom PNG --&gt;
 &lt;div class="b"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;!-- end dialog --&gt;
&lt;/div&gt;
</pre>

   </div>

   <div class="ft">
    <p class="compact">The use of SMF here is optional, but recommended. The dialog CSS does not require it. If minimizing the code is a must, it can be omitted and the fluid dialog layout should still apply. However, left margins may need to be applied to bump the content on the content container used (eg. a single DIV.)</p>
   </div>

  </div>

 </div>

 <div class="b"><div></div></div>

</div>

<!--/column -->
</div>

<!--/demo -->
</div>

<div style="clear:both">&nbsp;</div>

</body>
</html>